import React from 'react';
import { isEqual } from 'lodash';
import { Tree, Menu, Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons'

const { TreeNode } = Tree;

class TreeSelect extends React.Component {
  static defaultProps = {
    onChange: () => {},
    treeData: [],
  };

  static getDerivedStateFromProps(nextProps, prevState) {
    const { value = [] } = nextProps;
    if (!isEqual(value, prevState.checkedKeys)) {
      return {
        checkedKeys: value,
      };
    }
    return null;
  }

  state = {
    checkedKeys: [], // 选中的
    expandedKeys: [], // 展开项
  };

  componentDidMount() {
    this.expandAll(true);
  }

  onCheck = checkedKeys => {
    this.props.onChange(checkedKeys);
  };

  renderTreeNodes = data =>
    data.map(item => {
      let disabled = false;
      if ('hasUserNodes' in item && item.hasUserNodes === false) {
        disabled = true;
      }
      if (item.children && item.children.length > 0) {
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item} disabled={disabled}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode key={item.key} {...item} disabled={disabled} />;
    });

  // 获取所有选项
  getAllTreeKey = treeData => {
    let keys = [];
    treeData.forEach(item => {
      keys.push(item.key);
      if (item.children && item.children.length > 0) {
        keys = keys.concat(this.getAllTreeKey(item.children));
      }
    });
    return keys;
  };

  // 展开或收起所有
  expandAll = flag => {
    let expandedKeys = [];
    if (flag) {
      expandedKeys = this.getAllTreeKey(this.props.treeData);
    }
    this.setState({
      expandedKeys,
    });
  };

  // 全选或取消全选
  checkedAll = flag => {
    let checkedKeys = [];
    if (flag) {
      checkedKeys = this.getAllTreeKey(this.props.treeData);
    }
    this.setState({
      checkedKeys,
    });
    this.props.onChange(checkedKeys);
  };

  // 展开回调
  onExpand = expandedKeys => {
    this.setState({
      expandedKeys,
    });
  };

  render() {
    const { treeData } = this.props;
    const { checkedKeys, expandedKeys } = this.state;

    const menu = (
      <Menu>
        <Menu.Item>
          <div onClick={() => this.expandAll(true)}>展开所有 </div>
        </Menu.Item>
        <Menu.Item>
          <div onClick={() => this.expandAll(false)}>合并所有 </div>
        </Menu.Item>
        <Menu.Item>
          <div onClick={() => this.checkedAll(true)}>全部勾选 </div>
        </Menu.Item>
        <Menu.Item>
          <div onClick={() => this.checkedAll(false)}>取消全选 </div>
        </Menu.Item>
      </Menu>
    );
    return (
      <div>
        <Dropdown overlay={menu}>
          <a className="ant-dropdown-link" href="#">
            树操作<DownOutlined />
          </a>
        </Dropdown>
        <Tree
          checkable
          onCheck={this.onCheck}
          checkedKeys={checkedKeys}
          expandedKeys={expandedKeys}
          onExpand={this.onExpand}
        >
          {treeData.length > 0 ? this.renderTreeNodes(treeData) : null}
        </Tree>
      </div>
    );
  }
}
export default TreeSelect;
